<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
    </div>


</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    // from test import setValue
    try {
        console.log(123)
        alert(bbc)
    } catch (error) {
        console.log(error)
    }

    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            test: 'OK',
            title: '',
            value: ''
        },
        // 使用生命周期
        // Vue对象刚刚开始实例化，里面的选项并没有完成执行处理。所以说里的data,methods等选项是还没有可以使用的。
        beforeCreate: function () {
            console.log('生命周期：beforeCreate');
            console.log(this.test);
            // this.getResult()
            console.log(this)
            console.log('=======================================================')
        },
        // Vue对象已经实例化完成并且选项也完成了处理，但页面（DOM）并没完成加载甚至DOM对象都还没有组完成，所以我们没有办法直接使用$el方法来获取页面元素。
        created: function () {
            console.log('生命周期：created');
            console.log(this.test);
            this.getResult()
            this.title = '首页'
            console.log(this)
            console.log('=======================================================')
        },
        // DOM对象已经组完成了。可以对这个DOM操作，但它还没有挂载到页面。
        beforeMount: function () {
            console.log('生命周期：beforeMount');
            console.log(this.test);
            this.getResult()
            this.title = '首页'
            console.log(this)

            ul = document.createElement('div')
            li = document.createElement('li')
            li.innerText = 'Error'
            console.log('=======================================================')
        },
        // DOM组装完成，并且已经挂到页面中
        mounted: function () {

        },

        // methods是当前应用定义的函数方法
        methods: {
            getResult: function () {
                console.log('this is result.');
            }

        },
    })

    delete app

</script>

</html>